<template>
  <div class="page">
    <div class="header">
      <div class="header_content">
        <div class="inputWrapper">
          <div class="input">
            <i class="iconfont icon-a-icon_pressed"></i>
            <form action="javascript:void 0;">
              <input type="search" v-model="searchText" @keyup.13="gotoGroupCodeSearch" placeholder="请输入群活码名称" />
            </form>
          </div>
        </div>
      </div>
      <div class="brand" v-if="bannerList.length > 0">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, key) in bannerList" :key="key">
            <a v-if="item.url != ''" :href="item.url">
              <img :src="item.img" alt="" />
            </a>
            <img v-else :src="item.img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="ranking">
      <div class="ranking_head">
        <span class="ranking_title">排行榜</span>
        <!-- <i class="iconfont icon-qhm_listtitle"></i> -->
        <span class="ranking_more" @click="gotoRanking">更多</span>
        <icon class="iconfont icon-advertise-next"></icon>
      </div>
      <cranking-list :list="rankingList" :shop_log="shop_log"></cranking-list>
    </div>

    <div class="recommend">
      <div class="recommend_head">
        <span class="recommend_title">推荐</span>
        <!-- <i class="iconfont icon-qhm_recommend"></i> -->
        <!-- <span class="ranking_more">更多</span>
                <icon class="iconfont icon-advertise-next"></icon> -->
      </div>
      <c-list-item :listData="recommendList" :shop_log="shop_log"></c-list-item>
    </div>

    <c-add></c-add>
  </div>
</template>

<script>
import groupCodeController from "./group_code_index_controller";

export default groupCodeController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.page {
  // background: #fff;
  min-height: 100vh;
  padding-bottom: 3.0625rem;
}

.header {
  // height: 15rem;
  position: relative;
  background-image: linear-gradient(#fff 0%,#fff 55px, #F5F5F5 80px, #F5F5F5 100%);

  .header_content {
    padding-top: 1rem;
    padding:  0.3125rem 0 0.625rem 0;
    // background-color: #fff;
    // height: 10rem;
    // background-image: linear-gradient(150deg, #33d39d 1%, #59d4ab 100%), linear-gradient(#ea803f, #ea803f);
    background-blend-mode: normal, normal;
    // .title{
    //     font-size: 1.125rem;
    //     font-weight: normal;
    //     font-stretch: normal;
    //     line-height: 1.5rem;
    //     letter-spacing: 0.056rem;
    //     color: #fff;
    // }
    .inputWrapper {
      padding:0 0.75rem;

      .input {
        height: 2.125rem;
        background-color: #F5F5F5;
        border-radius: 1.0625rem;
        text-align: left;
        display: flex;
        align-content: center;

        i {
          padding-top: 0.531rem;
          padding-left: 1.125rem;
          color: #999;
          display: flex;
          align-content: center;
        }

        form {
          flex: 1;
          display: flex;
          align-items: center;
          padding-right: 8.496px;

          input {
            flex: 1;
            // margin-left: 8.496px;
            font-size: 0.875rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0.704px;
            color: #999;
            border: none;

            &::-webkit-input-placeholder {
              color: #999;
            }
          }
        }
      }
    }
  }

  .brand {
    // position: absolute;
    // top:0;
    // bottom: 0;
    width: 100%;
    height: 10rem;
    

    .my-swipe .van-swipe-item {
      padding: 0 0.781rem;
      height: 10rem;
      font-size: 20px;
      line-height: 150px;
      text-align: center;

      img {
        // width: 21.875rem;
        // height: 10rem;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 0.469rem;
      }
    }
  }
}

.ranking {
  padding:0.9375rem 0 0 0;
  position: relative;

  .ranking_head {
    display: flex;
    padding:0 0.75rem;
    align-content: flex-end;
    align-items: center;

    .ranking_title {
      font-size: 1rem;
      font-weight: bold;
      color: #000000;
    }

    .icon-qhm_listtitle {
      margin-left: 0.594rem;
      color: #ff8a00;
    }

    .ranking_more {
      flex: 1;
      text-align: right;
      font-size: 0.8125rem;
      letter-spacing: 0.608px;
      color: #6E6E79;
    }

    .icon-advertise-next {
      color: #6E6E79;
    }
  }
}

.recommend {
  // margin-top: 1.313rem;
  position: relative;
                                            
  .recommend_head {
    display: flex;
    padding:0 0.75rem;
    align-items: center;

    .recommend_title {
      font-size: 1rem;
      font-weight: bold;
      color: #000000;
    }

    .icon-qhm_recommend {
      transform: translateY(-0.09rem);
      margin-left: 0.594rem;
      color: #fd3489;
    }

    .ranking_more {
      flex: 1;
      text-align: right;
      font-size: 0.75rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0.038rem;
      color: #999;
    }

    .icon-advertise-next {
      margin-left: 0.144rem;
      color: #999;
    }
  }
}
</style>
